<template>
  <div>
    <el-table :data="fenyeList" height="450" style="width: 100%;" :row-class-name="tableRowClassName"
      :header-cell-style="{ background: '#8cc5ff' }" :default-sort = "{prop: 'date', order: 'descending'}">
      <el-table-column prop="vbillcode" label="采购入库单据号" width="180">
      </el-table-column>
      <el-table-column prop="crowno" label="行号" width="80">
      </el-table-column>
      <el-table-column prop="cwarehouse_name" label="库房名称">
      </el-table-column>
      <el-table-column prop="sto_unit_id" label="货位号">
      </el-table-column>
      <el-table-column prop="vbatchcode" sortable label="批号">
      </el-table-column>
      <el-table-column prop="code" label="商品编码">
      </el-table-column>
      <el-table-column prop="name" label="商品名称">
      </el-table-column>
      <el-table-column prop="materialspec" label="商品规格">
      </el-table-column>
      <el-table-column prop="vvendbatchcode" label="供应商批号">
      </el-table-column>
      <el-table-column prop="customer_name" label="客户名称">
      </el-table-column>
      <el-table-column prop="sku_num" label="数量">
      </el-table-column>
    </el-table>
    <el-pagination background layout=" total,prev, pager, next, sizes,jumper" @size-change="handleSizeChange"
      @current-change="handleCurrentChange" :current-page="pageNum" :page-size="pageSize"
      :page-sizes="[10, 20, 50, 100]" :total="total">
    </el-pagination>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        pageNum: 1,
        pageSize: 10,
        total: 0,
        tableData: []
      }
    },
    watch: {
      tableList(newData) {
        this.tableData = newData;
        this.total = newData.length;
      }
    },
    computed: {
      // 根据当前页码和每页条数计算当前页的数据
      fenyeList() {
        const startIndex = (this.pageNum - 1) * this.pageSize;
        return this.tableData.slice(startIndex, startIndex + this.pageSize);
      }
    },
    props: ['tableList'],
    methods: {
      //分页
      handleSizeChange(newsize) {
        this.pageNum = 1
        this.pageSize = newsize
      },
      handleCurrentChange(newpage) {
        this.pageNum = newpage
      },
      tableRowClassName({
        row,
        rowIndex
      }) {
        return rowIndex % 2 === 0 ? 'warning-row' : 'success-row';
      }
    },
  }
</script>
<style scoped>
  /deep/.el-table .warning-row {
    background: #e6f7ff;
  }

  /deep/.el-table .success-row {
    background: ##E0F8E0;
  }

  .el-pagination {
    float: right;
    margin: 20px;
  }
</style>
